<template>
	<view class="content">
		<view class="header" v-if="isShowHeader" :style="{ height: statusbarH + height + 'px' }">
			<view class="status-bar" :style="{ height: statusbarH + 'px' }"></view>
			<view class="content-box" :style="{ height: height + 'px' }">
				<view class="tit">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/dingwei.png"
						mode="widthFix"></image>
					<text>{{ weather.city.data }}</text>
				</view>
				<view class="index-search">
					<u-search bgColor="rgba(255, 255, 255, .2)" :inputStyle="{
							background: 'transparent',
							color: '#fff'
						}" searchIconColor="#fff" placeholder="请输入搜索内容" @click="tosearch" :disabled="true"
						:showAction="false"></u-search>
				</view>
			</view>
		</view>
		<view class="view_header">
			<view class="status-bar" :style="{ height: statusbarH + 'px' }"></view>

			<view class="index-top" v-if="weather != ''">
				<view class="tit" :style="{ height: height + 'px' }">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/dingwei.png"
						mode="widthFix"></image>
					<text>{{ weather.city.data }}</text>
				</view>
				<view class="weather" :style="{ 'margin-top': height / 4 + 'px' }">
					<text class="weather-item">{{ weather.temperature.data }}℃</text>
					<view class="border"></view>
					<text class="weather-item ">湿度：{{ weather.humidity.data }}</text>
					<view class="border"></view>
					<text class="weather-item">天气:{{ weather.weather.data }}</text>
					<view class="border"></view>
					<text class="weather-item">风向:{{ weather.winddirection.data }}</text>
					<view class="border"></view>
					<text class="weather-item">风力:{{ weather.windpower.data }}</text>
				</view>
			</view>
			<view class="index-search"><u-search placeholder="请输入搜索内容" @click="tosearch" :disabled="true"
					:showAction="false"></u-search></view>
			<view class="index-swiper">
				<u-swiper :list="navimglist" interval="5000" circular indicator indicatorMode="dot" height="150"
					:autoplay="true" radius="5" keyName="image"></u-swiper>
			</view>
			<view class="index-notice" @click="Noticeto">
				<view class="index-notice-left">
					<!-- <image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/xwgg.png" mode=""></image> -->
					<text style="color: rgb(84, 185, 81);">农场</text>
					<text>公告</text>
				</view>
				<u-notice-bar :text="text4" fontSize="26rpx" direction="column" bgColor="#00000000" :icon="' '"
					duration="5000" color="#080524" keyName="title"></u-notice-bar>
			</view>
		</view>
		<view class="index-menu" v-if="swiperMenu.length > 0">
			<view v-for="(item, index) in swiperMenu" :key="index" class="index_scroll">
				<view class="index_thumb" @click="routeto(item)">
					<image :src="item.image"></image>
				</view>
				<text>{{ item.ad_name }}</text>
			</view>
		</view>
		<view class="index-notice index-notice-order">
			<!-- <view class="index-notice-left">
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/ddpc.png" mode=""></image>
			</view> -->
			<view class="index-notice-left">
				<text style="color: rgb(84, 185, 81);">订单</text>
				<text>动态</text>
			</view>
			<view class="swiper">
				<swiper vertical circular :autoplay="true" :interval="5000" :duration="1000">
					<swiper-item v-for="(item, index) in order_window" :key="index">
						<view class="swiper-item">
							<text>{{ item.nickname }}在</text>
							<text class="yellow">{{ item.min }}</text>
							<!-- <text>分钟前付款了...</text> -->
							<text>分钟前下了订单</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="seckill">
			<div class="tit" @click="toMore(3)">
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/mszq.png" mode="widthFix">
				</image>
			</div>
			<view class="videos" v-if="video_menu.length > 0">
				<block v-for="(item, index) in video_menu" :key="index">
					<view class="videos-item" v-if="false">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/video-img.png"
							mode="widthFix" class="video-img"></image>
						<view class="video-container">
							<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/play.png"
								mode="widthFix" class="play-img"></image>
						</view>
					</view>
					<view class="videos-item" v-if="item.type == 1">
						<image :src="item.image" mode="widthFix" class="ad-img"></image>
					</view>
					<view class="videos-item" v-else>
						<video :id="`video${item.ad_id}`" object-fit="fill" :poster="item.image" :src="item.video"
							@play="videoPlay(item)" controls></video>
					</view>
				</block>
			</view>
		</view>
		<view class="ry-items">
			<view class="nav-tit">
				<view class="left">认养推荐</view>
				<view class="right" @click="toMore(1)">
					<text>更多</text>
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/more.png" mode="widthFix"
						class="more-img"></image>
				</view>
			</view>
			<my-ry-items :list="ry_list" @itemClick="itemClick" @btnClick="itemClick"></my-ry-items>
		</view>
		<view class="index-goods">
			<view class="nav-tit">
				<view class="left">商城推荐</view>
				<view class="right" @click="toMore(2)">
					<text>更多</text>
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/more.png" mode="widthFix"
						class="more-img"></image>
				</view>
			</view>
			<view class="index-goods-container"><my-waterfalls-goods :list="goods1"></my-waterfalls-goods></view>
		</view>
		<view style="height: 110rpx;"></view>
		<view class="index_text2" v-if="false">没有更多了~</view>

		<u-popup :closeOnClickOverlay="false" :show="loginShow" @close="loginShow = false" mode="center"
			bgColor="transparent" :overlayOpacity="0.6">
			<view class="weixin-login">
				<view class="weixin-login-info">
					<text class="text">登录后可体验完整功能</text>
					<button :disabled="loginDisabled" type="primary" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber" class="weixin-login-btn">微信授权登录</button>
				</view>
				<view class="weixin-login-bot">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/alert-close.png"
						@click="loginShow = false" mode="widthFix" />
				</view>
			</view>
		</u-popup>
		<my-tabbar></my-tabbar>
		<my-privacy></my-privacy>
	</view>
</template>

<script>
	import {
		getLocation,
		getWeather
	} from '../../common/helper';

	export default {
		data() {
			return {
				column: 2,
				weather: '',
				logo: '',
				title: 'Hello',
				navimglist: [],
				text4: [],
				swiperMenu: [],
				video_menu: [],
				goods1: [],
				page: 1,
				bottom: 0,
				loginShow: false,
				loginDisabled: false,
				paddingRight: 10,
				statusbarH: 30,
				height: 30,
				playId: '',
				ry_list: [],
				order_window: [],
				menu: [{
						ad_name: '牧场认养',
						ad_link: '/pages/foster/foster',
						image: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/mcry.png'
					},
					{
						ad_name: '视频监控',
						ad_link: '/pages/index/video-monitoring',
						image: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/spjk.png'
					},
					{
						ad_name: '积分商城',
						ad_link: '/pages/jf-shop/jf-shop',
						image: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/jfsc.png'
					},
					{
						ad_name: '商家供货',
						ad_link: '/pages/goods/stock-shop1',
						image: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/sjgh.png'
					},
					{
						ad_name: '交易大厅',
						ad_link: '/pages/deal/deal-hall',
						image: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/jydt.png'
					},
					{
						ad_name: '饲料领取',
						ad_link: '/pages/index/fodder-lq',
						image: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/sllq.png'
					},
					{
						ad_name: '特产商圈',
						ad_link: '/pages/deal/deal-hall1',
						image: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/tcsq.png'
					},
					{
						ad_name: '一县一品',
						ad_link: '/pages/auth/login1',
						image: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/yxyp.png'
					}
				],
				isShowHeader: false
			};
		},
		onLoad(e) {
			if (e.scene) {
				let scene = decodeURIComponent(e.scene);
				let res = scene.split('=');
				uni.setStorageSync('reid', res[1]);
			}
			let sysInfo = uni.getSystemInfoSync();
			// #ifdef MP-WEIXIN
			let custom = uni.getMenuButtonBoundingClientRect();
			this.height = custom.height + (custom.top - sysInfo.statusBarHeight) * 2;
			// #endif
			this.statusbarH = sysInfo.statusBarHeight + 5;
			// #ifdef APP-PLUS || H5
			//存入用户信息
			// this.$u.vuex('user_id', 20)
			//存入token
			// this.$u.vuex('user_token', 'e32d0e2d58764bc2d50397233c1579ae')
			// #endif
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.paddingRight = menuButtonInfo.width + 15;
			// #endif
			this.getgoodslist();
			this.getIndexGoods();

			getWeather().then(res => {
				console.info('weather', {
					res
				})
				this.weather = res;
			});
		},
		onReachBottom() {
			//重新请求数据，带上分页的数据
			// if (this.bottom > 0) {
			// 	this.page++;
			// 	this.getIndexGoods()
			// }
			//调用获取商品列表方法
			// this.getgoodslist()
		},
		onPullDownRefresh() {
			this.getgoodslist();
			this.getIndexGoods();
		},
		onPageScroll(e) {
			//uniapp自带的监听滚动条方法
			if (e.scrollTop >= 50) {
				this.isShowHeader = true;
			} else {
				this.isShowHeader = false;
			}
		},
		methods: {
			toMore(type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/foster/ry-tuijian'
					});
				} else if (type == 2) {
					uni.navigateTo({
						url: '/pages/goods/goods-tuijian?is_recommend=1'
					});
				} else {
					uni.navigateTo({
						url: '/pages/goods/goods-tuijian?is_seckill=1'
					});
				}
			},
			itemClick(item) {
				uni.navigateTo({
					url: `/pages/foster/foster-detail?id=${item.goods_id}`
				});
			},
			videoPlay(item) {
				if (this.playId !== '') {
					let videoContext = uni.createVideoContext(`video${this.playId}`);
					videoContext.pause();
				}
				this.playId = item.ad_id;
			},
			//获取首页列表
			async getgoodslist() {
				// post请求
				const data = await this.$post('api/Index');
				// //轮播图图片
				this.navimglist = data.data.swiper;
				this.swiperMenu = data.data.swiper_menu;
				this.video_menu = data.data.video_menu;
				this.text4 = [];
				//公告
				for (let i = 0; i < data.data.notice.length; i++) {
					this.text4.push(data.data.notice[i].title);
				}
				//logo
				this.logo = data.data.logo;
				this.order_window = data.data.order_window;
				this.order_window.forEach(item => {
					item.nickname = item.nickname ? item.nickname.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') :
						'';
				});
			},
			//获取首页商品列表
			async getIndexGoods() {
				const params = {
					pageIndex: this.page,
					pageSize: 20
				};
				const data = await this.$post('api/IndexGoods');
				if (data.code == 200) {
					this.goods1 = data.data.goods1;
					this.ry_list = data.data.ry_list;
					this.bottom = 0;
				} else {
					this.bottom = 0;
				}
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 500);
			},
			wapperClick(item) {
				if (this.user_id == 0) {
					// this.loginShow=true
				} else {
					this.jump('/pages/cart/show', item.goods_id);
				}
			},
			//路由跳转
			jump(url, id) {
				if (this.user_id == 0) {
					// this.loginShow=true
				} else {
					this.$u.route({
						url,
						params: {
							id
						}
					});
				}
			},
			//跳转到公告
			Noticeto() {
				this.$u.route('/pages/index/notice-list');
			},
			//跳转至搜索
			tosearch() {
				this.$u.route('pages/sort/search');
			},
			//跳转页面
			routeto(item) {
				switch (item.jump_type) {
					case '1':
						uni.navigateTo({
							url: item.ad_link,
							complete: (res) => {
								console.info(res)
							}
						})
						break
					case '2':
						uni.navigateTo({
							url: `/pages/index/html-detail?url=${item.ad_link}&fullPath=1`
						})
						break
					case '3':
						uni.navigateToMiniProgram({
							appId: item.app_id,
							path: item.ad_link,
							extraData: {

							},
							complete: (res) => {
								console.info({
									res
								})
							}
						})
						break
					default:
						console.info(222)
						break
				}

			},
			//跳转到商品列表
			searchdetailto(goods_type) {
				this.$u.route({
					url: '/pages/sort/searchdetail',
					params: {
						goods_type
					}
				});
			},
			//加入购物车
			async addcart(id) {
				const params = {
					goods_id: id,
					item_id: 0,
					goods_num: 1
				};
				const data = await AddCart(params);
				if (data.code == 200) {
					this.$u.toast(data.msg);
				} else {
					this.$u.toast(data.msg);
				}
			}
		}
	};
</script>
<style scoped lang="scss">
	.content {
		.header {
			width: 100%;
			position: fixed;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background: rgb(84, 185, 81);
			z-index: 9999999;

			.content-box {
				display: flex;
				align-items: center;
				padding: 0 2%;

				.tit {
					display: flex;
					align-items: center;
					color: #fff;
					font-size: 26rpx;

					text {
						padding: 0 10rpx;
					}
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.index-search {
					width: 50%;
				}
			}
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.view_header {
		width: 100%;
		background: url('https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/index-bg.png') #fff top/100% 380rpx no-repeat;

		.index-top {
			padding: 30rpx;
			color: #fff;

			.tit {
				@include flex-center();

				image {
					width: 36rpx;
					margin-right: 10rpx;
				}
			}

			.weather {
				@include flex-center();
				margin-top: 10rpx;
				justify-content: space-between;
				align-items: center;

				.border {
					width: 2rpx;
					height: 30rpx;
					background: $color-E4FFBE;
				}

				.weather-item {
					// flex: 1;
					color: $color-E4FFBE;
					text-align: center;

					// &:not(:last-child) {
					// 	border-right: 2rpx solid $color-E4FFBE;
					// }
				}

				.weather-item2 {
					flex: 2;
				}
			}
		}

		.index-search {
			margin-top: 20rpx;
			padding: 0 30rpx 20rpx 30rpx;

			.u-search {
				flex: 1;
			}
		}

		.index-swiper {
			padding: 0 30rpx;
		}
	}

	.index-notice {
		height: 80rpx;
		@include flex-center();
		position: relative;
		width: 95%;
		margin: 20rpx auto;
		box-shadow: 0 0 20rpx #eee;
		border-radius: 20rpx;
		box-sizing: border-box;

		.index-notice-left {
			padding-right: 10rpx;
			border-right: 1rpx solid $border-F7F7F7;

			text {
				font-weight: 600;
			}
		}

		image {
			width: 132rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}

		.swiper {
			height: 100%;
			overflow: hidden;
			flex: 1;

			.swiper-item {
				box-sizing: border-box;
				padding: 9px 12px;
				height: 80rpx;
				@include flex-center();

				.yellow {
					color: $color-FCBE38;
				}
			}
		}
	}

	.index-notice-order {
		padding: 0 30rpx;
		// margin: 20rpx 0 0 0;
		background: #fff;
		// border-radius: 0;
	}

	.index-menu {
		@include flex-box(row, space-between, null, wrap);
		padding: 20rpx 0;
		background-color: #fff;
		width: 95%;
		margin: 20rpx auto;
		box-shadow: 0 0 20rpx #eee;
		border-radius: 20rpx;

		.index_scroll {
			width: 25%;
			margin-bottom: 20rpx;
			text-align: center;

			.index_thumb {
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}
		}
	}

	.seckill {
		width: 95%;
		margin: 20rpx auto;
		box-shadow: 0 0 20rpx #eee;
		border-radius: 20rpx;
		background: #fff;

		.tit {
			padding: 20rpx 30rpx;

			image {
				width: 100%;
			}
		}

		.videos {
			.videos-item {
				position: relative;

				.video-img {
					width: 100%;
				}

				.video-container {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					background: rgba(#000, 0.3);

					.play-img {
						width: 80rpx;
						height: 80rpx;
						position: absolute;
						top: calc(50% - 40rpx);
						left: calc(50% - 40rpx);
					}
				}

				.ad-img {
					width: 100%;
				}

				video {
					width: 100%;
				}
			}
		}
	}

	.ry-items {
		margin-top: 20rpx;
		background: #fff;
		padding-bottom: 20rpx;
	}

	.nav-tit {
		padding: 30rpx 30rpx;
		@include flex-all();
		box-sizing: border-box;
		width: 95%;
		border-radius: 20rpx;
		margin: 20rpx auto 10rpx;
		box-shadow: 0 0 20rpx #eee;

		.left {
			font-weight: bold;
			font-size: 30rpx;
		}

		.right {
			@include flex-center();
			color: $color-919191;

			.more-img {
				width: 20rpx;
				margin-left: 5rpx;
			}
		}
	}

	.index-goods {
		margin-top: 20rpx;
		background: #fff;

		.index-goods-container {
			padding: 0 30rpx;
		}
	}
</style>